<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../css/shop.css">
</head>

<body>
    <table class="shop">
        <tbody class="shopS">
            <tr class="nav">
                <th class="Son1">Your Item(s)</th>
                <th class="Son2">Quantity</th>
                <th class="Son3">Price</th>
                <th class="Son4">Total Price</th>
                <th class="Son5">Remove</th>
            </tr>
            <!-- <tr class="shopList">
                <td class="imgTd"><img class="shops" src="../images/vans.jpg" alt="" srcset=""></td>
                <td class="titleTd">
                    <h6>Vans范斯 经典系列 Old Skool板鞋运动鞋 低帮经典款男女官方正品</h6>
                    <span>ID:#2001</span>
                    <span>Size:37</span>
                </td>
                <td class="Son2">
                    <span class="reduce">-</span>
                    <input type="text" value="1" class="count">
                    <span class="add">+</span>
                </td>
                <td class="Son3">
                    <del class="oriPrice">399.99 py6</del>
                    <b class="nowPrice">299.98 py6</b>
                </td>
                <td class="Son4">
                    <span class="priceAll">399.99 py6</span>
                    <span class="saveAll">You save 100.01 py6</span>
                </td>
                <td class="Son5">
                    <img class="del" src="../images/del.png" alt="">
                </td>
            </tr> -->

            <!-- <tfoot>
                <tr class="countall">
                    <td>
                        <span><i class="iconL"></i> Continue Shopping</span>
                    </td>
                    <td class="countRight">
                        <span class="cartall">Cart Total: <b>1929.45 py6.</b></span>
                        <span class="savetall">Your Total Saving:579.47 py6.</span>
                        <button>PROCEED TO CHECKOUT <i class="iconR"></i></button>
                    </td>
                </tr>
            </tfoot> -->
        </tbody>

    </table>
    <script>
        var shops = document.getElementsByClassName('shopS');
        var lists = [
            {
                img: 'vans.jpg',
                title: 'Vans范斯 经典系列 Old Skool板鞋运动鞋 低帮经典款男女官方正品',
                id: 2001,
                size: '37',
                oriPrice: 399.99,
                nowPrice: 299.98
            },
            {
                img: 'bag.png',
                title: 'Gucci Dressage Original GG Ganvas Tote Bag 296850 Coffe',
                id: 24234,
                size: 'Defalt',
                oriPrice: 180.96,
                nowPrice: 120.69
            },
            {
                img: 'converse.jpg',
                title: 'CONVERSE匡威官方 Batman 80th 蝙蝠侠80周年联名 高帮 167303C',
                id: 32001,
                size: '37',
                oriPrice: 259.98,
                nowPrice: 209.48
            },
            {
                img: 'bsdon.jpg',
                title: '波司登冬季新款大毛领羽绒服女中长款厚款防寒冬天外套B80141038',
                id: 5884,
                size: '160/84A',
                oriPrice: 1399.99,
                nowPrice: 1099.30
            },
            {
                img: 'olay.jpg',
                title: 'Olay玉兰油大红瓶新生塑颜金纯面霜50g 补水保湿修护紧致护肤霜女',
                id: 6854,
                size: '50g/ml',
                oriPrice: 268.00,
                nowPrice: 200.00
            }
        ]
        var ran = function () {
            lists.forEach(function (item, index) {
                shops[0].innerHTML += `<tr class="shopList">
                <td class="imgTd">
                    <img class="shops" src="../images/${item.img}" alt="" srcset="">
                </td>
                <td class="titleTd">
                    <h6>${item.title}</h6>
                    <span>ID:#${item.id}</span>
                    <span>Size:${item.size}</span>
                </td>
                <td class="Son2">
                    <span class="reduce">-</span>
                    <input type="text" value="1" class="count">
                    <span class="add">+</span>
                </td>
                <td class="Son3">
                    <del class="oriPrice">${item.oriPrice} py6</del>
                    <b class="nowPrice">${item.nowPrice} py6</b>
                </td>
                <td class="Son4">
                    <span class="priceAll">${item.oriPrice} py6</span>
                    <span class="saveAll">You save ${item.oriPrice-item.nowPrice} py6</span>
                </td>
                <td class="Son5">
                    <img class="del" src="../images/del.png" alt="">
                </td>
            </tr>`
            })

            var btnreduce = document.querySelector('.reduce');
            var btnadd = document.querySelector('.add');
            var td = document.querySelectorAll('td.Son2')
            // console.log(td)
            td.forEach(function (item, index) {
                item.onclick = function (e) {
                    var count = item.children[1]
                    var priceAll = item.nextElementSibling.nextElementSibling.children[0]
                    var oriprice = item.nextElementSibling.children[0]
                    // console.log(priceAll)
                    // console.log(e.target.innerHTML)
                    if (e.target.innerHTML === '-') {
                        // console.log(item.children[1])
                        count.value = parseInt(count.value) - 1;
                        if (count.value <= 0) {
                            count.value = 0;
                        }
                        priceAll.innerHTML = count.value * parseFloat(oriprice.innerHTML) + 'py6';
                    } else if (e.target.className === 'add') {
                        count.value = parseInt(count.value) + 1;
                    }
                    priceAll.innerHTML = count.value * parseFloat(oriprice.innerHTML) + 'py6';
                }
            })


            /* btnreduce.onclick=function(){
                count.value=parseInt(count.value)-1;
                if(count.value<=0){
                    count.value=0;
                }
            }
            btnadd.onclick=function(){
                count.value=parseInt(count.value)+1;
    
            } */
        }
        ran();
    </script>
</body>

</html>